<template>
  <!-- 商品详情页中的用户评价部分 -->
  <div class="use-assess">
    <div class="assess-top border-bottom">
      <p class="title">用户评价</p>
      <p><img src="~assets/images/home/xiao_youjiantou拷贝@2x.png" alt=""></p>
    </div>

    <div class="assess-bto">
        <p class="left"><img src="~assets/images/home/图层4拷贝@2x.png" alt=""></p>
        <div class="center">
          <p class="name">那些花儿</p>
          <p class="desc">1.5米 白橡木 胡桃色</p>
        </div>
        <p class="right">2017-0-26</p>
    </div>
    <div class="center">
      <p>颜色淡雅，非常漂亮</p>
    </div>
    <div class="bto">
      <p>
        <img src="~assets/images/home/图层5拷贝@2x.png" alt="">
        <img src="~assets/images/home/图层6@2x.png" alt="">
        <img src="~assets/images/home/图层7@2x.png" alt="">
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.use-assess {
  background: #fff;
  margin-top: .1rem;
  .assess-top {
    display: flex;
    padding-left: .15rem;
    justify-content: space-between;
    align-items: center;
    height: .44rem;
    p {
      color: #333;
      font-size: .14rem;
    }
    img {
      width: .07rem;
      height: .105rem;
      margin-right: .14rem;
    }
  }
  .assess-bto {
    padding: .1rem .1rem 0 .15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: .45rem;
      height: .45rem;
      img {
        width: 100%;
      }
    }
    .center {
      position: relative;
      left: -.6rem;
      .name {
        color: #333;
        font-size: .14rem;
        margin-bottom: .045rem;
      }
      .desc {
        color: #666;
        font-size: .11rem;
      }
    }
    .right {
      color: #666;
      font-size: .12rem;
    }
  }
  .center {
    color: #333;
    font-size: .14rem;
    padding: .1rem .15rem ;
  }  
  .bto {
    padding: 0  0 .15rem .15rem;
    img {
      display: inline-block;
      width: 1.05rem;
      height: .75rem;
    }
    }
}

</style>
